<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>湖南省自来水公司营销管理信息系统</title>

	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script type="text/javascript" src="/js/vue3.js"></script>
	<script type="text/javascript" src="/js/axios.js"></script>
</head>

<body>

<div id="wrapper">



	<div id="header">

		<div class="content_pad">
			<h1><a href="../workspace.html">湖南省自来水公司营销管理信息系统</a></h1>

			<ul id="nav">

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-wrench"></span>业扩工程</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/be__request.html">01 用户申请</a></li>
							<li><a href="../page/be__audit.html">02 初步审核</a></li>
							<li><a href="../page/be__pay.html">03 交施工费</a></li>
							<li><a href="../page/be__billclear.html">04 水费清算</a></li>
							<li><a href="../page/be__contract.html">05 供水协议</a></li>
							<li><a href="../page/be__working.html">06 施工竣工</a></li>
							<li><a href="../page/be__open.html">07 通水停水</a></li>
							<li><a href="../page/be__save.html">08 档案存档</a></li>
							<li><a href="../page/be_order.html">工单管理</a></li>
							<li><a href="../page/be_abort.html">终止工单</a></li>
							<li><a href="../page/be_reportProgress.html">业扩工程进度</a></li>
							<li><a href="../page/be_reportMoney.html">业扩收费报表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-person"></span>用户管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/user_search.html">用户查询</a></li>
							<li><a href="../page/user_add.html">快捷新户</a></li>
							<li><a href="../page/user_changeName.html">快捷过户</a></li>
							<li><a href="../page/user_changeBank.html">快捷代扣</a></li>
							<li><a href="../page/user_changeMeter.html">快捷换表</a></li>
							<li><a href="../page/user_changeFormula.html">快捷重签</a></li>
							<li><a href="../page/user_delete.html">快捷销户</a></li>
							<li><a href="../page/user_reportShortcut.html">快捷操作记录</a></li>
							<li><a href="../page/user_docNum.html">档案号管理</a></li>
							<li><a href="../page/user_sendMsg.html">短信群发</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-pencil"></span>抄表管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/rd_volume.html">表册管理</a></li>
							<li><a href="../page/rd_init.html">抄表初始化</a></li>
							<li><a href="../page/rd_task.html">任务分配</a></li>
							<li><a href="../page/rd_enter.html">抄表录入</a></li>
							<li><a href="../page/rd_audit.html">抄表审核</a></li>
							<li><a href="../page/rd_reportReading.html">抄表情况查询</a></li>
							<li><a href="../page/rd_reportVolumeReading.html">抄表统计报表</a></li>
							<li><a href="../page/rd_reportZero.html">零吨位用户查询</a></li>
							<li><a href="../page/rd_reportMaxValue.html">最大码值修正记录</a></li>
							<li><a href="../page/rd_reportCPreAmount.html">底码修正记录</a></li>
							<li><a href="../page/rd_reportMeterCheck.html">水表周检报表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-star"></span>收费管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/pay_window.html">窗口收费</a></li>
							<li><a href="../page/pay_batch.html">批量收费</a></li>
							<li><a href="../page/pay_invoiceReprint.html">发票补开/作废</a></li>
							<li><a href="../page/pay_reportDebts.html">欠费报表</a></li>
							<li><a href="../page/pay_reportPay.html">收费情况报表</a></li>
							<li><a href="../page/pay_reportMonthRecycle.html">月资金回收情况报表</a></li>
							<li><a href="../page/pay_reportBalance.html">用户预收情况报表</a></li>
							<li><a href="../page/pay_reportWaterType.html">各类用水统计总表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-script"></span>发票管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/inv_invoiceManage.html">发票总表</a></li>
							<li><a href="../page/inv_invoiceIn.html">发票入库</a></li>
							<li><a href="../page/inv_invoiceOut.html">发票出库</a></li>
							<li><a href="../page/inv_invoiceArchive.html">发票交票</a></li>
							<li><a href="../page/inv_invoiceReportOut.html">发票出库情况查询</a></li>
							<li><a href="../page/inv_invoiceReportEmp.html">收费人员发票查询</a></li>
							<li><a href="../page/inv_invoiceReportArchive.html">发票交票情况查询</a></li>
							<li><a href="../page/inv_invoiceReportUse.html">发票使用情况查询</a></li>
							<li><a href="../page/inv_invoiceReportMoneySum.html">销账汇总报表</a></li>
							<li><a href="../page/inv_invoiceReportMoneyDetail.html">销账明细报表</a></li>
						</ul>
					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-gear"></span>系统设置</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../page/sys_area.html">抄表辖区</a></li>
							<li><a href="../page/sys_meterType.html">水表型号</a></li>
							<li><a href="../page/sys_dept.html">部门管理</a></li>
							<li><a href="../page/sys_emp.html">员工管理</a></li>
							<li><a href="../page/sys_menupower.html">菜单权限设置</a></li>
							<li><a href="../page/sys_areapower.html">辖区权限设置</a></li>
							<li><a href="../page/sys_waterType.html">用水类型设定</a></li>
							<li><a href="../page/sys_surcharge.html">附加费设定</a></li>
							<li><a href="../page/sys_flow.html">流程配置</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_current nav_dropdown nav_icon_only">
					<a href="javascript:;">&nbsp;</a>

					<div class="nav_menu">
						<ul>
							<li><a href="../workspace.html">我的工作台</a></li>
							<li><a href="../page/sys_pwd.html">修改密码</a></li>
							<li><a href="/autoWater/logout">退出系统</a></li>
						</ul>
					</div> <!-- .item -->
				</li>
			</ul>
		</div> <!-- .content_pad -->

	</div> <!-- #header -->

	<div id="masthead">
		<div>
			<span id="pagetitle"><a href="javascript:;">片区权限</a></span>
			<span id="welcome_span">欢迎回来，{{userName}}</span>
		</div>
	</div> <!-- #masthead -->

	<div id="content" class="xgrid">


		<div class="x12">

			<h2>设置片区权限</h2>

			<div class="form label-inline uniform">

				<div v-if="isBatch"><div class="field">
					<span class="bold">正在设置以下员工的片区权限<span> <br/>
					<span class="red">注意：你正在编辑多个员工的片区权限，不会显示这些员工的原有权限。
							<br/>仅仅在只编辑一个员工时，才会显示该员工的原有权限。</span>
					</div>
					<div class="field">
						<textarea class="medium" disabled="disabled" v-model="empName" style="width:100%;height:50px;" />
						</textarea>
					</div>
				</div>

				<div class="controlset field" v-for="item in areaList" :key="item.id">
					<span class="label">{{item.areaName}}</span>
					<div class="controlset-pad"><input type="checkbox" v-model="item.checked" :value="item.checked"/></div>
				</div>

				<div class="buttonrow">
					<button class="btn" @click="save">保存</button>
					<button class="btn btn-grey" onClick="history.back(-1);">返回</button>
				</div>
			</div>

		</div> <!-- .x12 -->

	</div> <!-- #content -->

	<div id="footer">
		<div class="content_pad">
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->

</div> <!-- #wrapper -->
<script type="text/javascript">
	var app = Vue.createApp({
		data() {
			return {
				userName:JSON.parse(sessionStorage.getItem("user")).empName,
				areaList: [], // 存储权限数据
				empAreaList: [], // 存储员工权限数据
				isBatch:false,
				odlArr:[],
				empList:[],
				empName:'',//员工名字
			}
		},
		methods:{
			//保存
			save(){
				let addEmpPower = [];
				let delEmpPower = [];
				let empIdList = [];
				if (this.isBatch){
					// 说明是批量修改
					// 1，拿到所有员工的id
					empIdList = this.empList.map(i=>i.id)
					// 2，拿到要新增的权限
					this.areaList.filter(item =>{
						if (item.checked){
							addEmpPower.push(item.id)
						}
					})
				}else {
					// 就是修改单个员工的id
					// 1.收集数据
					let arr = [];
					this.areaList.forEach(item => {
						if (item.checked){
							arr.push(item.id);
						}
					});
					// 1.2 需要删除的数据
					delEmpPower = this.odlArr.filter(item=>!arr.includes(item));
					// 1.1 需要新增的数据
					arr = arr.filter(emp =>!this.odlArr.includes(emp))
					addEmpPower = [];
					// 加工成一个对象
					arr.forEach(i => {
						addEmpPower.push({
							"empID":this.id,
							"areaID":i
						})
					})
					// 2，校验数据
				}
				// 封装数据
				const data = {
					addEmpPower,delEmpPower,"empId":this.id,
					empIdList
				}
				// 3.发送请求
				axios.post('/sy/empAreaPower/edit', data).then(response=>{
					if (response.data.data) {
						alert("保存成功!");
						if (this.id){
							location = "sys_areapower_set.html?id="+this.id;
						}else {
							location = "sys_areapower.html";
						}
					}
				})
			},
			load(){
				// 加载所有的权限
				axios.get("/sy/area")
						.then(response => {
							if (response.data.data) {
								this.areaList = response.data.data; // 将返回的区域数据赋值给areaList
								//给每一个对象加一个checked
								this.areaList.forEach(item => {
									item.checked =false;
								});
							}
						})
						.catch(error => {
							console.error(error);
						});
				if(this.id){
					// 如果进来说明是修改单个员工的权限
					setTimeout(()=>this.getAreaByEmpid(),100);
				}else {
					// 说明是批量修改
					this.isBatch = true;
					this.empList=JSON.parse(sessionStorage.getItem("empList"));
					//删除
					sessionStorage.removeItem("empList");
					// 把员工的名字取出来
					this.empList.forEach(e=>{
						this.empName += e.empName+","
					})
					this.empName = this.empName.substring(0,this.empName.length-1)
				}
			},
			// 根据员工id拿到该员工的权限
			getAreaByEmpid(){
				axios.get("/sy/empAreaPower/byEmpid/"+this.id).then(response => {
					if (response.data.data) {
						this.empAreaList = response.data.data; // 将返回的区域数据赋值给areaList
						// 拿到该员工所有的权限id
						this.odlArr = this.empAreaList.map(e=>e.areaID);
						//给每一个对象加一个checked
						this.areaList.forEach(item => {
							if (this.odlArr.includes(item.id)) {
								// 如果包含
								item.checked = true;
							}
						});
					}
				})
			}
		},
		computed:{
			id(){
				return new URLSearchParams(location.search).get("id");
			}
		},
		mounted() {
			// 加载页面数据
			this.load();
		},
	}).mount("#wrapper");
</script> <!-- #wrapper -->
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

$(document).ready ( function ()
{
	// Dashboard.init ();
});

</script>

</body>

</html>
